Ext.onReady(function(){
    Ext.QuickTips.init();
    
   
    
    
    var register = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        //title: 'Register',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        //defaultType: 'textfield',

        items: [{
        	    xtype:'textfield',
                fieldLabel: 'First Name',
                name: 'first',
                
                allowBlank:false
            },{
            	xtype:'textfield',
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank:false
            },{
            	xtype:'textfield',
                fieldLabel: 'PhoneNo',
                name: 'phoneno',
                allowBlank:false
            }, {
            	xtype:'textfield',
                fieldLabel: 'Email',
                name: 'email',
                allowBlank:false,
                vtype:'email'
            }, {
            	xtype:'textfield',
                fieldLabel: 'Password',
                name: 'password',
               inputType:'password',
               allowBlank:false
                //vtype:'email'
            }, {
            	xtype:'textfield',
                fieldLabel: 'Confirm',
                name: 'cpassword',
                inputType:'password',
                allowBlank:false,
                validator: function(value) {
                    var password = this.previousSibling('[name=password]');
                    return (value === password.getValue()) ? true : 'Passwords do not match.'
                }
                //vtype:'email'
            },
            {
            	xtype:'textarea',
            	fieldLabel:'Address',
            	name:'address'
            }
        ]

    });
    
    
    
    
	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
    var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'loginCheck.htm', 
        bodyStyle:'padding:5px 5px 0',
        frame:true,
        title:'Welcome to VCarPool  Please Login', 
        defaultType:'textfield',
	monitorValid:true,
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
        items:[{ 
                fieldLabel:'Username', 
                name:'loginUsername', 
                allowBlank:false 
            },{ 
                fieldLabel:'Password', 
                name:'loginPassword', 
                inputType:'password', 
                allowBlank:false 
            }],
 
	// All the magic happens after the user clicks the button     
        buttons:[{ 
                text:'Login',
                formBind: true,	 
                // Function that fires when user clicks the button 
                handler:function(){ 
                    login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connecting', 
                        waitMsg:'Sending data...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
                        success:function(){ 
                        	//Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				   //if (btn == 'ok'){
		                        var redirect = 'home.jsp'; 
		                        window.location = redirect;
                                 //  }
			        //});
                        },
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
                        } 
                    }); 
                } 
            },{
                text: 'Register',
                
                handler: function() {
            	//Ext.Msg.alert("hi");
            	var win1 = new Ext.Window({
                    layout:'fit',
            		model: true ,
            		height: 310,
            		width:360,
            		title:'Welcome To Vcarpool',
            		closable: false,
                    resizable: false,
                    plain: true,
                    border: false,
                    items: [register],
                            buttons: [{
                                text: 'Register',
                                handler: function() {
                            	   Ext.Msg.alert("Successful","SuccessFuly Registered Please Login");
                                    win1.hide();
                                    
                                }
                            }, {
                                text: 'Cancel',
                                handler: function() {
                            	win1.hide();
                                }
                            }]
            	});
            	win1.show();
                }
            }] 
    });
 
 
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.       
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
	});
	win.show();
});